<template>
  <div>
    <el-card class="box-card">
      <div slot="header">
        <!-- 表单搜索操作栏 -->
        <el-form
          :inline="true"
          :model="search"
          class="demo-form-inline"
          size="mini"
        >
          <el-form-item>
            <el-button type="success" @click="add">添加店铺</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="batchDel">批量删除</el-button>
          </el-form-item>

          <el-form-item>
            <el-input v-model="search.name" placeholder="关键字"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getTableData">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 表格数据 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        v-loading="loading"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>

        <el-table-column prop="ID" label="编号" width="55"> </el-table-column>

        <el-table-column prop="shopName" label="店铺名称" width="120px">
          <template #default="{ row }">
            <div v-html="highlight(row.shopName)"></div>
          </template>
        </el-table-column>

        <el-table-column
          prop="shopAddress"
          label="店铺地址"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div v-html="highlight(row.shopAddress)"></div>
          </template>
        </el-table-column>

        <el-table-column prop="phone" label="联系电话">
          <template #default="{ row }">
            <div>{{ row.phone }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="yingyeTime" label="营业时间"> </el-table-column>

        <el-table-column prop="jingyingfw" label="经营范围"> </el-table-column>

        <el-table-column prop="fuzer" label="负责人"> </el-table-column>

        <el-table-column prop="dianpumj" label="店铺面积">
          <template #default="{ row }">
            <div>{{ row.dianpumj }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="shopDate" label="开店日期">
          <template #default="{ row }">
            <div>{{ row.shopDate }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="email" label="邮箱"> </el-table-column>

        <el-table-column prop="region" label="区域"> </el-table-column>

        <el-table-column prop="liansuo" label="是否连锁">
          <template #default="{ row }">
            <el-switch
              v-model="row.liansuo"
              :active-value="true"
              :inactive-value="false"
            >
            </el-switch>
          </template>
        </el-table-column>

        <el-table-column prop="wangAddress" label="网址"> </el-table-column>

        <el-table-column prop="kefuPhone" label="客服电话"> </el-table-column>

        <el-table-column label="操作" width="220">
          <template #default="{ row }">
            <!-- 删除气泡提示 -->
            <el-popconfirm
              confirm-button-text="确定"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              :title="'确定删除【' + row.shopName + '】的信息吗？'"
              @confirm="del(row.AddressID)"
              @cancel="$message('已取消删除')"
            >
              <template #reference>
                <el-button type="danger" size="mini">删除</el-button>
              </template>
            </el-popconfirm>
            &nbsp;
            <el-button type="warning" size="mini" @click="edit(row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页 -->
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :hide-on-single-page="autoHide"
        :page-sizes="[5, 10, 20, , 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
    </el-card>

    <!-- 添加的弹窗 -->
    <el-dialog
      title="添加店铺"
      append-to-body
      width="1000px"
      top="5vh"
      :visible.sync="createDialogFormVisible"
    >
      <create
        v-model="createDialogFormVisible"
        @refresh="getTableData"
      ></create>
    </el-dialog>

    <!-- 修改的弹窗 -->
    <el-dialog
      title="修改店铺"
      append-to-body
      width="1000px"
      top="5vh"
      :visible.sync="editDialogFormVisible"
    >
      <edit
        v-model="editDialogFormVisible"
        :editData="editData"
        @refresh="getTableData"
      ></edit>
    </el-dialog>
  </div>
</template>

<script>
import basepath from "@/plugins/base";
import create from "../Address/create.vue";
import edit from "@/views/Address/edit.vue";

export default {
  name: "shops",
  data() {
    return {
      imgbase: "",
      loading: false,
      pageIndex: 1, //当前的 页码
      pageSize: 5, //每页条数
      totalNum: 0, //总数量
      autoHide: false, //当只有一页数据时是否隐藏分页
      search: {
        name: "",
      },
      tableData: [], //数据
      multipleSelection: [], //选中的数据
      editData: {},
      //控制添加弹窗
      createDialogFormVisible: false,
      editDialogFormVisible: false,
    };
  },
  methods: {
    //获取数据data
    getTableData() {
      this.loading = true;
      this.axios({
        method: "get",
        url: "HJQ_store_info",
        params: {
          page: this.pageIndex,
          limit: this.pageSize,
          name: this.search.name,
        },
        data: {},
      }).then((response) => {
        console.log("response: ", response);

        this.tableData = response.data;
        this.totalNum = response.count;
        setTimeout(() => {
          this.loading = false;
        }, 200);
      });
    },
    //复选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //分页
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.getTableData();
    },
    //切换每页数量
    handleSizeChange(val) {
      this.pageSize = val;
      this.getTableData();
    },
    //添加
    add() {
      this.createDialogFormVisible = true;
    },
    //修改
    edit(row) {
      this.editData = JSON.parse(JSON.stringify(row));
      this.editDialogFormVisible = true;
    },
    //删除
    del(id) {
      // //调用Api 保存数据
      this.axios({
        method: "delete",
        url: "HJQ_store_info",
        params: { id },
      }).then((res) => {
        if (res.code > 0) {
          //axios  完成
          this.$message({
            message: res.msg,
            type: "success",
            showClose: true,
            duration: 3000,
          });

          //刷新
          this.getTableData();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
            showClose: true,
            duration: 3000,
          });
        }
      });
    },
    //批量删除
    batchDel() {
      if (this.multipleSelection.length > 0) {
        let ids = [];
        let names = "";
        this.multipleSelection.forEach((v) => {
          ids.push(v.AddressID);
          names += v.shopName + ",";
        });
        names = names.substring(0, names.length - 1);
        this.$confirm("确定删除【" + names + "】", "删除确认", {
          type: "warning",
        })
          .then(() => {
            this.axios({
              method: "delete",
              url: "HJQ_store_info/batch",
              data: ids,
            }).then((res) => {
              if (res.code > 0) {
                //axios  完成
                this.$message({
                  message: res.msg,
                  type: "success",
                  showClose: true,
                  duration: 3000,
                });

                //刷新
                this.getTableData();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error",
                  showClose: true,
                  duration: 3000,
                });
              }
            });
          })
          .catch(() => {});
      } else {
        this.$message("请选择需要删除的数据！");
      }
    },
    //文字搜索 高亮效果
    highlight(v) {
      return v.replace(
        this.search.name,
        '<span class="highlight">' + this.search.name + "</span>"
      );
    },
  },
  created() {
    this.imgbase = basepath.imgUrl;
    this.getTableData();
  },
  components: {
    create,
    edit,
  },
  filters: {
    //格式化金额
    money(value) {
      //金额格式转换
      return new Intl.NumberFormat("zh-CN", {
        style: "currency",
        currency: "CNY",
      }).format(value);
    },
  },
};
</script>

<style>
.highlight {
  font-weight: 600;
  font-size: 16px;
  color: #ffffff;
  animation: glow 666ms infinite alternate;
}

@keyframes glow {
  form {
    text-shadow: 0 0 10px #1877f2, 0 0 20px #1459b3, 0 0 30px #179bff;
  }

  to {
    text-shadow: 0 0 5px #1877f2, 0 0 10px #1459b3, 0 0 15px #179bff;
  }
}

.demo-form-inline .el-form-item {
  margin-bottom: 0px;
}
</style>